import React, { useState, useMemo } from 'react'

export default function App() {
  const [count, setCount] = useState(1)
  const [val, setValue] = useState('')
  // 当修改val的值时,expensive没有必要调用. 但是expensive还是被调用.

  // 注意: 使用useMemo,useMemo的返回值是回调的返回值
  // useMemo的作用: 减少函数执行次数. 如果第二个参数不写,那就没用.如果第二个参数是空数组,函数只会调用一次. 如果第二个参数是监听数据的数组,则监听的数据发生变化,函数调用

  // useCallback和useMemo的相同点和不同点:
  // 相同点:
  // 1. 都用于提高代码执行性能
  // 2. 都传入一个函数,并且第二个参数都监听数据

  // 不同点:
  // 1. 返回值不同,useCallback返回函数.useMemo返回函数执行的结果
  // 2. useCallback减少函数创建次数,useMemo减少函数执行次数
  const expensive = useMemo(() => {
    console.log('compute')
    let sum = 0
    for (let i = 0; i < count * 100; i++) {
      sum += i
    }
    return sum
  }, [count])

  return (
    <div>
      <h4>
        {count}-{val}-{expensive}
      </h4>
      <div>
        <button onClick={() => setCount(count + 1)}>+c1</button>
        <input value={val} onChange={(event) => setValue(event.target.value)} />
      </div>
    </div>
  )
}
